import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local';
import { defineConfig, presetAttributify, presetIcons, presetTypography, presetUno, presetWebFonts, transformerDirectives, transformerVariantGroup } from 'unocss';

export default defineConfig({
  shortcuts: [
    ['btn', 
      'px-4 py-1 rounded inline-block bg-indigo-500 text-white cursor-pointer hover:bg-indigo-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['icon-btn', 
      `inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-indigo-500 dark:hover:text-indigo-400`],
    [
      'text-btn', 
      `px-2 py-1 inline-block cursor-pointer 
      select-none opacity-75 transition duration-200 
      ease-in-out hover:opacity-100 hover:text-indigo-500 
      dark:hover:text-indigo-400`
    ],
    [
      'text-btn-active', 
      `px-3 py-1 inline-block cursor-pointer 
      select-none opacity-75 transition duration-200 
      ease-in-out hover:opacity-100 text-indigo-500 
      dark:text-indigo-400 b-b-4 b-color-indigo-500 
      dark:b-color-indigo-400`
    ],
  ],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      extraProperties:{
        'display': 'inline-block',
        'vertical-align': 'middle',
      }
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
      processors: createLocalFontProcessor(),
    }),
  ],
  theme:{
    breakpoints:{
      'sm': '320px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px'
    },
  },
  transformers: [transformerDirectives(), transformerVariantGroup()],
});
